<template>
    <div class="secondParticulars">
        <div class="header">
            <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
        </div>
        <div class="content">
            <div class="content_masterMap">
                <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                    <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                        <van-image class="product_detail_top-image" :src="image"
                            @click="enlargeImage(realSrcList, index)" />
                    </van-swipe-item>
                </van-swipe>
                <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>
            </div>
            <div class="content_box">
                <div class="box_title">
                    {{ lookData?.styleName || '' }}
                    <div class="box_title_icon"
                        v-if="lookData?.hmMechanismsList && lookData?.hmMechanismsList[1].cooperationMode">多机制</div>
                </div>
                <div class="box_text">
                    {{ lookData?.id || '' }}
                    <van-image :src="copy" class="box_textOne_icon" @click="copyClick(lookData.id)"
                        v-show="lookData.id" />
                </div>
                <div class="box_text justify_content">
                    <span>{{ lookData?.recruiterDept || '' }}</span>
                    <span>{{ lookData?.contactPerson || '' }}</span>
                </div>
                <div class="box_text justify_content">
                    <div class="box_text_left">
                        {{ lookData?.stockCode || '' }}
                        <van-image :src="copy" class="box_textOne_icon" @click="copyClick(lookData.stockCode)"
                            v-show="lookData.stockCode" />
                    </div>
                    <div class="box_text_bm">
                        <van-image :src="icon_bumen" class="box_pact_bm_icon" />
                        {{ lookData?.coreName || '未知部门' }}
                    </div>
                </div>
                <mechanismCard class="box_mechanism" :data="lookData?.hmMechanismsList"></mechanismCard>
                <div v-for="item in infoList" :key="item.id" class="box_special" @click="popClick(item.id, item)">
                    <van-image :src="item.img" class="box_special_leftImg"></van-image>
                    <div class="title">{{ item.title }}</div>
                    <van-image :src="icon_huisejiantou" class="box_special_rightImg"></van-image>
                </div>
                <messagePopup v-model="popShow" :type="popType" :data="popData" :title="popTitle"></messagePopup>
            </div>
        </div>
        <div class="footer">
            <div class="button" @click="dialogShow = true">借调</div>
        </div>
        <van-dialog v-model:show="dialogShow" :showConfirmButton="false">
            <div class="dialog_top">
                <van-image :src="icon_erciqueren"></van-image>
                <div class="title">二次确认</div>
                <div class="describe">
                    将向「{{ lookData?.coreName || '未知部门' }}」发起「 {{ lookData?.styleName }} 」借调，对方同意后，可前往领取。
                </div>
            </div>
            <div class="postscript">
                <div class="title">附言</div>
                <van-form @submit="onSubmit">
                    <van-field maxlength="50" show-word-limit v-model="message" rows="4" label="" type="textarea"
                        placeholder="请输入" :border="false" @input="(e) => { forbidRule(e, 'emoji') }"
                        :rules="[{ required: false, trigger: 'onBlur', message: '请输入' }]" />
                    <div class="buttons">
                        <div class="cancel" @click="cancel">取消</div>
                        <van-button class="button" :loading="loading2" loading-text="执行中..." round block type="primary"
                            native-type="submit" v-throttle:click>
                            提交确认
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getEnvValue } from "@/utils/index";
import { showFailToast, showImagePreview, showSuccessToast } from "vant";
import { copyTextToClipboard } from '@/utils/index'
import { loanLook, loanAdd } from '@/api/operation/index'
import messagePopup from './components/messagePopup.vue'
import mechanismCard from './components/mechanismCard.vue'
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const copy = new URL("@/assets/productHome/icon_fuzhi.png", import.meta.url).href;
const icon_bumen = new URL("@/assets/operation/icon_bumen.png", import.meta.url).href;
const icon_jichuxinxi = new URL("@/assets/operation/icon_jichuxinxi.png", import.meta.url).href;
const icon_huisejiantou = new URL("@/assets/operation/icon_huisejiantou.png", import.meta.url).href;
const icon_erciqueren = new URL("@/assets/operation/icon_erciqueren.png", import.meta.url).href;

const router = useRouter()
const route = useRoute()
const infoList = ref([
    { img: icon_jichuxinxi, title: '基础信息：类目｜品牌｜对接群｜规格/材质 | 历史最低售价', content: '基础信息', id: 6 },
    { img: icon_jichuxinxi, title: '产品实拍', content: '产品实拍', id: 5 },
])
const loading = ref(false)
const loading2 = ref(false)

const lookData = ref<any>({})
const realSrcList = ref<string[]>([]);
const stockSrcList = ref<string[]>([]);
const popShow = ref(false)
const popType = ref<number>()
const popData = ref()
const popTitle = ref()

const dialogShow = ref(false)
const message = ref('')



// 输入事件、禁用规则
const forbidRule = (e: any, type: string) => {
    // 输入法表情默认不能输入
    if (type == 'emoji') {
        // emoji：输入时禁用输入法表情
        message.value = e.target.value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    } else if (type == 'blank') {
        // blank：输入时禁用空格
        message.value = e.target.value.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    }
}
/** 二次确认同意 */
const onSubmit = async () => {
    loading2.value = true
    try {
        const res = await loanAdd({
            auditId: lookData?.value?.auditId,
            outLogId: lookData?.value?.outLogId,
            productId: lookData?.value?.id,
            loanRemark: message.value
        })
        loading2.value = false
        showSuccessToast('发起借调')
        handleLeft()
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('借调失败');
        }
        loading2.value = false
    }
}
/** 取消 */
const cancel = () => {
    dialogShow.value = false
    message.value = ''
}
/**
 * 弹窗
 *  6: 基础信息
 *  5: 产品实拍
 */
const popClick = async (index: number, item: any) => {
    popShow.value = true
    popType.value = index
    popTitle.value = item.content
    popData.value = lookData.value
}

/** 返回区分不同地址 */
const handleLeft = () => {
    router.back();
};
/** 复制 */
const copyClick = (title: string) => {
    copyTextToClipboard(title)
}
/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
    showImagePreview({
        images: data,
        startPosition: index,
    });
};
const GetLook = async () => {
    loading.value = true
    const res = await loanLook(route.params.id)
    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
        res.data.productImages = realSrcList.value
    }
    if (res.data.stockImage) {
        const real_src = res.data.stockImage.split(",");
        fetchImagesSequentially(real_src, stockSrcList.value);
        res.data.stockImages = stockSrcList.value
    }
    lookData.value = res.data
    loading.value = false
}
/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
onMounted(() => {
    GetLook()
})
</script>
<style lang="less" scoped>
.secondParticulars {
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;

        .content_masterMap {
            width: 100%;
            height: 320px;

            :deep(.van-image) {
                width: 100%;
                height: 320px;
            }
        }

        .content_box {
            padding: 20px 15px;
            box-sizing: border-box;

            .box_title {
                display: flex;
                align-items: center;
                font-weight: 500;
                font-size: 18px;
                color: #1A1B1C;

                .box_title_icon {
                    width: 56px;
                    height: 22px;
                    background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                    border-radius: 5px;
                    margin-left: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 400;
                    font-size: 12px;
                    color: #FFFFFF;
                }
            }

            .box_text {
                margin-top: 15px;
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;

                .box_textOne_icon {
                    margin-left: 10px;
                    width: 14px;
                    height: 14px;
                }

                .box_text_left {
                    flex: 0.9;
                    min-width: 0;
                    display: flex;
                    align-items: center;
                }

                .box_text_bm {
                    background: #EBF4FF;
                    border-radius: 2px;
                    padding: 5px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    font-weight: 500;
                    font-size: 12px;
                    color: #0094FF;

                    .box_pact_bm_icon {
                        width: 12px;
                        height: 12px;
                        margin-right: 5px;
                    }
                }
            }

            .justify_content {
                justify-content: space-between;
            }

            .box_mechanism {
                margin: 20px 0;
            }

            .box_special {
                margin-bottom: 15px;
                display: flex;
                align-items: center;

                .box_special_leftImg {
                    width: 16px;
                    height: 16px;
                    margin-right: 7px;
                }

                .title {
                    flex: 1;
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                }

                .box_special_rightImg {
                    width: 7px;
                    height: 12px;
                    margin-left: 7px;
                }
            }
        }
    }

    .footer {
        width: 100%;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        padding: 20px 15px;
        box-sizing: border-box;

        .button {
            width: 100%;
            height: 100%;
            background: #0094FF;
            border-radius: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}

:deep(.van-popup) {
    height: 427px;

    .dialog_top {
        width: 100%;
        padding-top: 20px;
        background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-flow: column;
        align-items: center;


        .van-image {
            width: 70px;
            height: 70px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            text-align: center;
            width: 100%;
            margin-top: 15px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 15px;
            padding: 0 10px;
        }

    }

    .postscript {
        width: 100%;
        box-sizing: border-box;
        margin-top: 15px;
        padding: 0 10px;

        .title {
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;
            margin-bottom: 10px;
        }



        .buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            bottom: 10px;
            width: calc(100% - 20px);
            box-sizing: border-box;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .button {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                background: #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }
    }
}

:deep(.van-field) {
    background: #F6FAFF !important;
}
</style>